<template>
    <div>
        <button @click="show_pop">点击弹起</button>
        <van-popup v-model="show" style="height:100%;width:100%" closeable close-icon-position="top-left">
        <div class="upload">
        <div class="upload_btn">发布</div>
        <div class="container">
            <!-- 上传照片 -->
            <div class="upload_img">
                <div style="height:88px;text-align:left;max-width:530px" :style="file_width">
                    <van-uploader v-model="fileList" multiple :max-count="6"/>
                </div>
            </div>
            <!-- 发表文字-->
            <van-cell-group inset>
                <van-field v-model="message" rows="3" autosize type="textarea" maxlength="100" 
                placeholder="分享下你的下厨心得、生活点滴" show-word-limit 
                :border="false" :autofocus=true />
            </van-cell-group>
            <!-- 选择标签 -->
            <van-cell class="cell_tab" title="# 标签" is-link to="/" />
            <!-- 标签 -->
            <div style="text-align:left">
                <van-button class="tag_btn" square @click="click_tag1()" :disabled="dis_btn1">
                    早餐·{{today}}
                </van-button>
                <van-button class="tag_btn" square @click="click_tag2()" :disabled="dis_btn2">
                    午餐·{{today}}
                </van-button>
                <van-button class="tag_btn" square @click="click_tag3()" :disabled="dis_btn3">
                    晚餐·{{today}}
                </van-button>
            </div>
        </div>
        </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    data(){
        return {
            show:false,
            fileList:[],
            file_width:{width:"88px"},
            message:"",
            today:"",
            dis_btn1:false,
            dis_btn2:false,
            dis_btn3:false,
        }
    },
    methods:{
        show_pop(){
            this.show=true;
        },
        // 点击按钮添加标签
        click_tag1(){
            this.message=this.message+`#早餐·${this.today}  `;
            this.dis_btn1=true;
        },
        click_tag2(){
            this.message=this.message+`#午餐·${this.today}  `;
            this.dis_btn2=true;
        },
        click_tag3(){
            this.message=this.message+`#晚餐·${this.today}  `;
            this.dis_btn3=true;
        },
    },
    mounted(){
        // 获取时间
        var d=new Date();
        this.today=`${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
    },
    watch:{
        // 监视上传照片div宽度,当大于等于四张的时候,88px*4
        fileList(){
            if(this.fileList.length>=4){
                let w=this.file_width.width; //88px
                this.file_width.width=parseInt(w)*(this.fileList.length+1)+"px";
            }else{
                //小于四张的时候固定宽度
                this.file_width.width="352px";
                // console.log(this.file_width.width);
            }
        },
        message(){
            // 如果内容清空则标签不被禁用
            if(this.message==""){
                this.dis_btn1=false;
                this.dis_btn2=false;
                this.dis_btn3=false;
            }
        },
    }
}
</script>
<style scoped>
.upload .container{
    width: 90%;
    margin: 0 auto;
}
.upload .cell_tab {
    text-align:left;
    margin-top:1rem; margin-bottom: 0.7rem;
    background-color:rgba(244, 249, 250,0.8);
}
.upload .tag_btn{
    color:#666; background-color:rgb(235, 234, 234);
    height:2rem; margin-bottom:0.5rem; margin-right:0.5rem;
}
.upload .upload_btn{
    position:fixed;
    top:1rem; right:1.5rem; 
    color:coral; font-weight:700;
}
.upload .upload_img {
    width:100%; height:88px;
    overflow:auto;
    margin-top: 4rem;
}
/* 隐藏滚动条 */
.upload .upload_img::-webkit-scrollbar{
    display: none;
}
</style>